import { PlusOutlined } from "@ant-design/icons";
import { ProTable } from "@ant-design/pro-components";
import { Button } from "antd";

import React from "react";

const QueryFilterPage: React.FC = () => {
  const columns = [
    {
      title: "订单号",
      dataIndex: "orderNo",
      key: "orderNo",
    },
    {
      title: "客户名称",
      dataIndex: "customerName",
      key: "customerName",
    },
    {
      title: "订单金额",
      dataIndex: "amount",
      key: "amount",
      render: (amount: number) => `¥${amount}`,
    },
    {
      title: "订单状态",
      dataIndex: "status",
      key: "status",
      valueType: "select",
      valueEnum: {
        pending: { text: "待处理", status: "warning" },
        processing: { text: "处理中", status: "processing" },
        completed: { text: "已完成", status: "success" },
        cancelled: { text: "已取消", status: "error" },
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      valueType: "dateTime",
    },
    {
      title: "操作",
      key: "action",
      render: () => <Button type="link">查看详情</Button>,
    },
  ];

  const dataSource = [
    {
      key: "1",
      orderNo: "ORD001",
      customerName: "张三",
      amount: 1000,
      status: "pending",
      createTime: "2024-01-01 10:00:00",
    },
    {
      key: "2",
      orderNo: "ORD002",
      customerName: "李四",
      amount: 2000,
      status: "completed",
      createTime: "2024-01-02 14:30:00",
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h1>订单查询</h1>
      <ProTable
        columns={columns}
        dataSource={dataSource}
        rowKey="key"
        search={{
          labelWidth: "auto",
        }}
        toolBarRender={() => [
          <Button key="add" type="primary" icon={<PlusOutlined />}>
            新增订单
          </Button>,
        ]}
      />
    </div>
  );
};

export default QueryFilterPage;
